<template>
  <div class="mv">
    <video
      v-show="!mvLoading"
      :src="videoUrl"
      class="video"
      controls
      autoplay
      @canplay="canplay"
    ></video>
    <p class="mask" v-if="!mvLoading"></p>
    <div class="comments" v-if="comments">
      <p class="bg"></p>
      <p class="title">最新评论</p>
      <CommentItem
        v-for="item in comments"
        :key="item.commentId"
        :comment="item"
        class="item"
      ></CommentItem>
      <p class="moreBtn" @click="loadMore" v-if="!commentLoading" ref="moreBtn">
        {{
          !comments.length
            ? "暂无评论"
            : isAll
            ? "到底了"
            : moreHint
            ? "松开加载更多"
            : "加载更多"
        }}
      </p>
    </div>
    <Loading v-if="mvLoading || commentLoading"></Loading>
  </div>
</template>

<script>
import Loading from "@/components/Loading";
import CommentItem from "@/components/CommentItem";
export default {
  data() {
    return {
      id: null,
      mvLoading: false,
      commentLoading: false,
      videoUrl: null,
      comments: null,
      offset: 0,
      onTouch: false,
      isAll: false,
      moreHint: false,
    };
  },
  components: {
    Loading,
    CommentItem,
  },
  mounted() {
    let _this = this;
    let body = document.body;
    let html = document.documentElement;
    body.ontouchstart = function () {
      _this.onTouch = true;
    };
    body.ontouchend = function () {
      _this.onTouch = false;
      body.onscroll();
    };
    body.onscroll = function () {
      let moreBtn = _this.$refs.moreBtn;
      if (!moreBtn) return;
      var lh = parseInt(window.getComputedStyle(moreBtn).lineHeight);
      let st = Math.ceil(body.scrollTop || html.scrollTop);
      let max = body.clientHeight - window.innerHeight;
      let h = max - moreBtn.clientHeight + lh;
      _this.moreHint = false;
      if (st >= h) {
        if (st >= max - lh && !_this.isAll) {
          _this.moreHint = true;
          if (!_this.onTouch) {
            _this.loadMore();
          }
        } else if (!_this.onTouch) {
          setTimeout(() => {
            html.scrollTop ? (html.scrollTop = h) : (body.scrollTop = h);
          }, 0);
        }
      }
    };
  },
  created() {
    this.$emit("playMv", true);
    this.id = this.$route.query.id;
    if (!this.id) return;
    this.mvLoading = true;
    this.$http
      .get("/mv/url", {
        params: {
          id: this.id,
        },
      })
      .then((d) => {
        // console.log(d);
        this.videoUrl = d.data.data.url;
      });
    this.commentLoading = true;
    this.$http
      .get("/comment/mv", {
        params: {
          id: this.id,
          limit: 20,
          offset: this.offset,
        },
      })
      .then((d) => {
        this.commentLoading = false;
        // console.log(d);
        this.comments = d.data.comments;
        if (this.comments.length < 20) {
          this.isAll = true;
        }
      });
  },
  destroyed() {
    this.$emit("playMv", false);
    let body = document.body;
    body.onscroll = null;
    body.ontouchstart = null;
    body.ontouchend = null;
  },
  methods: {
    canplay() {
      this.mvLoading = false;
    },
    loadMore() {
      if (this.isAll) return;
      this.commentLoading = true;
      this.offset += 20;
      this.$http
        .get("/comment/mv", {
          params: {
            id: this.id,
            limit: 20,
            offset: this.offset,
          },
        })
        .then((d) => {
          this.commentLoading = false;
          // console.log(d);
          let arr = d.data.comments;
          if (arr.length < 20) {
            this.isAll = true;
          }
          this.comments = this.comments.concat(arr);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.mv {
  .video {
    position: fixed;
    z-index: 99;
    width: 100vw;
    vertical-align: bottom;
    top: 50px;
    left: 0;
  }
  .comments {
    .bg {
      position: fixed;
      z-index: 1;
      width: 100vw;
      height: calc(100vw / 16 * 9);
      top: 50px;
      left: 0;
      background: linear-gradient(#fcfcfd 50%, #eeeff0 100%);
    }
    .title {
      position: fixed;
      width: 100%;
      height: 25px;
      line-height: 25px;
      padding: 0 10px;
      font-size: 12px;
      color: #666;
      background-color: #eeeff0;
      box-shadow: 0 1px 5px #ddd;
    }
    .item {
      padding: 0 5px;
    }
    .moreBtn {
      height: 220px;
      line-height: 55px;
      text-align: center;
      color: #999;
      background: linear-gradient(#fcfcfd 50%, #eee 100%);
    }
  }
}
</style>

<style scoped>
.mv .comments .title {
  top: calc(100vw / 16 * 9 + 50px);
}
.mv .mask {
  height: calc(100vw / 16 * 9 + 27px);
}
</style>